<script setup>
    import {ref} from "vue"
    const tagList = ref([
        {id: 1, name: "京东秒杀"},
        {id: 1, name: "每日特价"},
        {id: 1, name: "品类秒杀"},
        {id: 1, name: "今日特惠"},
    ])
    const current_index = ref(0)
</script>

<template>
    <div>
        <ul>
            <li v-for="item, index in tagList" key="item.id"
            :class="current_index === index ? 'isClick' : ''"
            @click="current_index = index">
                {{ item.name }}
            </li>
        </ul>
    </div>
</template>

<style scoped>
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        padding: 0 10px;
        margin: 100px auto;
        list-style: none;
        display: flex;
        border-bottom: 3px solid rgb(105, 16, 16);
        border-top: 1px solid #ccc;
    }
    li {
        width: 100px;
        height: 50px;
        text-align: center;
        line-height: 45px;
    }
    /* 点击样式 */
    li.isClick {
        background-color: rgb(147, 34, 34);
        color: #fff;
    }
</style>